<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>支付配置</cite></a>
        <a><cite>支付通道</cite></a>
    </span>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">支付通道列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layui-form" style="float:right;">
                        <div class="layui-form-item" style="margin:0;">
                            <div class="layui-input-inline">
                                <input type="text" name="searchPassageName" id="searchPassageName" placeholder="通道名称" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="searchIfCode" id="searchIfCode" placeholder="接口代码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <select name="searchPayType" id="searchPayType" lay-search="">
                                    <option value="">支付类型</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="type" id="searchStatus" placeholder="状态" lay-search="">
                                    <option value="-99">状态</option>
                                    <option value="0">关闭</option>
                                    <option value="1">开启</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
                        <a class="layui-btn create"><i class="layui-icon layui-icon-add-1"></i>新增支付通道</a>
                        <a class="layui-btn layui-btn-danger relationDelete"><i class="layui-icon layui-icon-delete"></i>彻底删除</a>
                    </div>
                </div>
                <table id="cList" lay-filter="cList"></table>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['table','util', 'form'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
        ,view = layui.view
        ,element = layui.element
        ,admin = layui.admin;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        // 加载支付类型
        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/pay_interface/getPayType',
            error: function(err){
                layer.alert(err);
            },
            success: function(res){
                if(res.code == 0){
                    var payTypeList = res.data;
                    //遍历赋值
                    for(var i in payTypeList){
                        $("#searchPayType").append('<option value= '+payTypeList[i].payType+'>'+payTypeList[i].payTypeName+'</option>');
                    }
                    form.render('select');
                }
            }
        });

        var tplEdit = function(d){
            return "<a class='layui-btn layui-btn-primary layui-btn-xs' lay-event='account'><i class='layui-icon layui-icon-group'></i>子账户</a>" +
                    "<a class='layui-btn layui-btn-primary layui-btn-xs' lay-event='rate'><i class='layui-icon layui-icon-rmb'></i>费率</a>" +
                    "<a class='layui-btn layui-btn-primary layui-btn-xs' lay-event='risk'><i class='layui-icon layui-icon-engine'></i>风控</a>" +
                    "<a class='layui-btn layui-btn-xs' lay-event='edit'><i class='layui-icon layui-icon-edit'></i>编辑</a>";
        };

        var tplStatus = function(d){
            var checkedHtml = " id='"+d.id+"' ";
            if(d.status == 1) {
                checkedHtml += " checked";
            }
            return '<input type="checkbox" lay-filter="statusSwitch" lay-skin="switch" '+checkedHtml+' lay-text="启用|停用">';
        };

        var tplRate = function(d){
            return "<span style='color: blue'>"+ d.passageRate+"%</span>";
        };

        var tplAllowSupplierAdd = function(d){
            if(d.allowSupplierAdd == 1) {
                return "<span style='color: green'>允许添加</span>";
            }else {
                return "<span style='color: red'>不允许添加</span>";
            }
        };

        table.render({
            elem: '#cList'
            ,url: layui.setter.baseUrl + '/config/pay_passage/list'
            ,where: { access_token: layui.data(layui.setter.tableName).access_token}
            ,id: 'tableReload'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title: '通道ID'}
                ,{field:'passageName', title: '通道名称'}
                ,{field:'ifCode', title: '接口代码'}
                ,{field:'ifName', title: '接口名称'}
                ,{field:'payTypeName', title: '支付类型'}
                ,{field:'passageRate', title: '通道费率', templet: tplRate}
                ,{field:'status', title: '通道状态',templet: tplStatus }
                ,{field:'edite', width: 300, fixed: 'right', title: '操作', templet: tplEdit }
            ]]
            ,page: true
            ,skin: 'line'
        });

        //监听工具条
        table.on('tool(cList)', function(obj){
            var data = obj.data;
            if(obj.event === 'account'){
                location.href = layui.setter.baseLocal + "config/pay_passage_account//payPassageId=" + data.id;
            } else if(obj.event === 'rate'){
                view.xxpayPopup("费率", "config/pay_passage/rate_set", {id: data.id}, {area:['70%','60%']});
            } else if(obj.event === 'risk'){
                view.xxpayPopup("风控", "config/pay_passage/risk_set", {id: data.id}, {area:['70%','80%']});
            }  else if(obj.event === 'edit'){
                view.xxpayPopup("编辑", "config/pay_passage/update", {id: data.id}, {area:['70%','80%']});
            }
        });

        $('.layuiAdmin-btns .relationDelete').on('click', function(){
            var checkedData = table.checkStatus("tableReload").data; //获得选中的数据
            if(checkedData.length === 0) return layer.msg('请选择数据');
            var delIds = [];
            $.each(checkedData, function(){
                delIds.push(this.id);
            });

            //弹层
            var relationDeleteHtml = `
                <div style="color:red; margin:20px; padding-left:50px" >
                    <label class="layui-inline"> 此操作将删除选中数据及所有关联数据！是否继续删除？</label><br/><br/>
                    <label class="layui-inline"> 关联表：[支付通道表];[支付通道账户表];</label>
                </div>
                <form class="layui-form center">
                    <div class="layui-form-item" style="margin-top:30px">
                        <div class="layui-form-item" style="margin-top:20px">
                            <label class="layui-form-label" style="width:130px;">平台超级密码：</label>
                            <div class="layui-input-inline" style="width: 312px;">
                                <input type="password" autocomplete="off" class="layui-input relationDeletePassword">
                            </div>
                        </div>
                        <div class="layui-input-block" style="margin-left: 180px;">
                            <button type="button" class="layui-btn layui-btn-danger relationDeleteBtn">确认删除</button>
                            <button type="button" class="layui-btn layui-btn-normal" onclick="layer.closeAll();">取消</button>
                        </div>
                    </div>
                </form>
            `;
            //打开弹层
            var thisLayerId = layer.open({ type: 1, area: ['520px', 'auto'], title: '提示', content: relationDeleteHtml });
            $(".relationDeleteBtn").click(function(){
                var relationDeletePassword = $('.relationDeletePassword').val();
                if(!relationDeletePassword) return layer.msg('请输入平台超级密码！');

                var layerMsgId = layer.msg('正在执行删除任务... ',{time: 0, shade: 0.3});
                admin.req({
                    type: 'get',
                    url: layui.setter.baseUrl + '/config/pay_passage/relationDelete',
                    data: {ids: JSON.stringify(delIds), superPassword: relationDeletePassword},
                    error: function (err) {
                        layer.close(layerMsgId);
                        layer.alert(err);
                    },
                    success: function (res) {
                        layer.close(layerMsgId);
                        if(res.code == '0'){ //成功创建任务
                            layer.close(thisLayerId);
                            table.reload('tableReload');  //刷新页面
                            layer.alert("操作成功, 共删除了 "+res.data+" 条关联数据！");
                        }
                    },
                    complete: function () {
                        layer.close(layerMsgId);
                    }
                });
            });
        });

        $('.create').click(function(){
            view.xxpayPopup("新增支付通道", "config/pay_passage/create", {null: null}, {area:['70%','80%']});
        });

        form.on('switch(statusSwitch)', function(data){

            var id = $(data.elem).attr('id');
            var updateState = data.elem.checked ? "1" : "0";
            var loadingIndex = layer.load();
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/config/pay_passage/updateStatus',
                data: {id: id, status: updateState},
                success: function(res){
                    if(res.code == 0) {
                        table.reload('tableReload');
                    }
                },
                complete:function(){
                    layer.close(loadingIndex);
                }
            });
        });

        // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var passageName = $('#searchPassageName').val();
                var ifCode = $('#searchIfCode').val();
                var payType = $('#searchPayType').val();
                var status = $("#searchStatus").val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        passageName: passageName,
                        ifCode: ifCode,
                        payType: payType,
                        status: status
                    }
                });
            }
        };

        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });

        // 渲染表单
        form.render();

    });
    
</script>
